import roomStore from "@/store/roomStore";
import React, { useEffect } from "react";
import { observer } from "mobx-react-lite";

const Index: React.FC<{ setMenuIndex: Function }> = (props) => {
  const { setMenuIndex } = props;
  const roomInfo = roomStore.roomInfo;
  
  useEffect(() => {
    roomStore.getRoomInfo();
  }, []);

  return (
    <div className={"chat-room-info"}>
      <div>
        <span className={"ChatRoomId"}>ID:{roomInfo?.room_id}</span>
        <span className={"ChatRoomName"}>{roomInfo?.room_title}</span>
      </div>
      <div className={"ChatMenu"}>
        <div className={"ChatMenuItem"} onClick={() => setMenuIndex(1)}>
          房间
        </div>
        <div className={"ChatMenuItem"} onClick={() => setMenuIndex(2)}>
          我的
        </div>
      </div>
    </div>
  );
};
export default observer(Index);
